<template>
  <svg
      :t="svg.t"
      :viewBox="svg.viewBox"
      :version="svg.version"
      :xmlns="svg.xmlns"
      :p-id="svg.svgId"
      :width="size"
      :height="size"
      :style="styleObj"
  >

    <path
        :d="svg.d"
        :p-id="svg.pathId">
    </path>
  </svg>
</template>

<script>
import svgPath from "@/data/svg";

export default {
  name: "icon",
  props: {
    size: {
      type: Number,
      default: 14
    },
    name: {
      type: String,
      default: 'test'
    },
    fill: {
      type: String,
    }
  },
  data() {
    return {
      svgPath,
      svg: {},
      styleObj: {
        fill: this.fill
      }
    }
  },
  created() {
    this.svg = svgPath.filter(n => n.name === this.name)[0]
  }
}
</script>

<style scoped>

</style>